<template>
  <div class="module3">
    <el-card
      class="box-card"
      :body-style="{ padding: '18px 0px 5px', boxSizing: 'border-box' }"
    >
      <el-row class="title">
        <el-col :span="6">
          <el-tabs v-model="platform" :stretch="true" @tab-click="handleClick">
            <el-tab-pane label="全部数据" name="all" class="tac"></el-tab-pane>
            <el-tab-pane label="手游" name="h5" class="tac"></el-tab-pane>
            <el-tab-pane label="页游" name="pc" class="tac"></el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="17" class="ml40">
          <el-date-picker
            v-model="query.startDate"
            type="date"
            placeholder="选择日期"
            @input="getTimerData(1, $event)"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
          <el-date-picker
            class="ml20"
            v-model="query.endDate"
            type="date"
            placeholder="选择日期"
            @input="getTimerData(2, $event)"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-col>
      </el-row>
      <el-table :data="tableData" height="420" v-loading="tableLoading">
        <el-table-column label="序号" width="60" type="index" fixed>
        </el-table-column>
        <el-table-column prop="game_name" label="游戏" width="120" fixed>
          <template slot-scope="scope">
            <!-- :href="scope.row.game_name" -->
            <a target="_blank" style="color: #409eff">
              {{ scope.row.game_name }}
            </a>
          </template>
        </el-table-column>
        <el-table-column sortable prop="pay" label="流水" width="90">
        </el-table-column>
        <el-table-column sortable prop="grade" label="评分" width="90">
        </el-table-column>
        <el-table-column sortable prop="cos" label="投入" width="90">
        </el-table-column>
        <el-table-column sortable prop="divide" label="分成" width="90">
        </el-table-column>
        <el-table-column sortable prop="reg" label="注册数" width="90">
        </el-table-column>
        <el-table-column sortable prop="role_rate" label="转化率" width="90">
          <template slot-scope="scope">
            <div>
              {{
                scope.row.role_rate
                  ? (scope.row.role_rate / 100).toFixed(1) + "%"
                  : 0
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column sortable prop="actives" label="活跃数" width="90">
        </el-table-column>

        <!--  <el-table-column sortable prop="npays" label="新付款" width="90">
        </el-table-column> -->
        <el-table-column sortable prop="pay_new" label="新付款金额" width="120">
        </el-table-column>
        <el-table-column sortable prop="npayRate" label="新付率" width="90">
          <template slot-scope="scope">
            <div>
              {{ scope.row.npayRate ? scope.row.npayRate + "%" : 0 }}
            </div>
          </template>
        </el-table-column>

        <!-- <el-table-column sortable prop="odpays" label="旧付款" width="90">
        </el-table-column> -->
        <el-table-column sortable prop="pay_old" label="旧付款金额" width="120">
        </el-table-column>
        <el-table-column sortable prop="odpayRate" label="旧付率" width="90">
          <template slot-scope="scope">
            <div>
              {{ scope.row.odpayRate ? scope.row.odpayRate + "%" : 0 }}
            </div>
          </template>
        </el-table-column>

        <el-table-column sortable prop="pays" label="付费人数" width="100">
        </el-table-column>
        <el-table-column sortable prop="payRate" label="付费率" width="90">
          <template slot-scope="scope">
            <div>
              {{ scope.row.payRate ? scope.row.payRate + "%" : 0 }}
            </div>
          </template>
        </el-table-column>

        <el-table-column sortable prop="arpu" label="ARPU" width="90">
        </el-table-column>
        <el-table-column sortable prop="arppu" label="ARPPU" width="100">
        </el-table-column>
        <el-table-column sortable prop="remain2" label="次留" width="90">
        </el-table-column>
        <el-table-column sortable prop="remain3" label="3留" width="90">
        </el-table-column>
        <el-table-column sortable prop="remain7" label="7留" width="90">
        </el-table-column>
        <el-table-column sortable prop="remain15" label="15留" width="90">
        </el-table-column>
        <el-table-column sortable prop="ltv" label="LTV1" width="90">
        </el-table-column>
        <el-table-column sortable prop="ltv7" label="LTV7" width="90">
        </el-table-column>
        <el-table-column sortable prop="ltv15" label="LTV15" width="90">
        </el-table-column>
        <el-table-column sortable prop="ltv30" label="LTV30" width="90">
        </el-table-column>
        <el-table-column sortable prop="ltv60" label="LTV60" width="90">
        </el-table-column>
        <el-table-column sortable prop="ltv120" label="LTV120" width="100">
        </el-table-column>
        <el-table-column sortable prop="avg_level" label="平均等级" width="100">
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 查询
      query: {
        startDate: new Date().toLocaleString().substr(0, 10),
        endDate: new Date().toLocaleString().substr(0, 10),
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now(); //不可以选择今天之后的日期
        },
      },
      platform: "all",
      flag: false,
      tableData: [], // 表格主数据
      tableLoading: false,
    };
  },
  created() {
    this.query.endDate = this.getIndexDay(1);
    this.query.startDate = this.getIndexDay(1);
    this.getState();
  },
  mounted() {},
  methods: {
    handleClick(tab, event) {
      this.platform = tab.name;
      this.getState();
    },
    // 获取指定多少天之前的时间
    getTimerData(flag, data) {
      let formatData = this.toDate(data);
      if (flag === 1) {
        this.query.startDate = formatData;
      } else {
        this.query.endDate = formatData;
      }
      this.getState();
    },
    // 获取
    getState() {
      this.tableLoading = true;
      if (this.platform == "all") {
        let task = [this.getWyState(), this.getWebState()];
        Promise.all(task).then((res) => {
          this.tableData = res[0].concat(res[1]);
          this.tableData.map((item, index) => (item.index = index + 1));
          this.initTableData();
        });
      } else if (this.platform == "h5") {
        this.getWyState().then((res) => {
          this.tableData = res;
          this.initTableData();
        });
      } else {
        this.getWebState().then((res) => {
          this.tableData = res;
          this.initTableData();
        });
      }
    },
    initTableData() {
      this.tableLoading = false;
      // 提前计算，便于排序
      let day =
        (Date.parse(this.query.endDate) - Date.parse(this.query.startDate)) /
          (1 * 24 * 60 * 60 * 1000) +
        1;
      this.tableData.map((obj, i) => {
        obj.index = i + 1;
        obj.payRate = obj.pays
          ? parseFloat(((obj.pays / obj.logins) * 100).toFixed(1))
          : 0;
        obj.actives = obj.actives ? Math.floor(obj.actives / day) : 0;
        obj.arpu = obj.arpu
          ? obj.arpu
          : !!obj.logins && !!obj.pay
          ? parseFloat((obj.pay / obj.logins).toFixed(2))
          : 0;
        obj.arppu = obj.arppu
          ? obj.arppu
          : !!obj.pays && !!obj.pay
          ? parseFloat((obj.pay / obj.pays).toFixed(2))
          : 0;
        obj.odpayRate = obj.odpays
          ? parseFloat(((obj.odpays / obj.odlogins) * 100).toFixed(1))
          : 0;
        obj.npayRate = obj.npays
          ? parseFloat(((obj.npays / obj.nlogins) * 100).toFixed(1))
          : 0;
        obj.ltv = obj.pay_0 ? parseFloat((obj.pay_0 / obj.reg).toFixed(2)) : 0;
        obj.ltv7 = obj.pay_7 ? parseFloat((obj.pay_7 / obj.reg).toFixed(2)) : 0;
        obj.ltv15 = obj.pay_15
          ? parseFloat((obj.pay_15 / obj.reg).toFixed(2))
          : 0;
        obj.ltv30 = obj.pay_30
          ? parseFloat((obj.pay_30 / obj.reg).toFixed(2))
          : 0;
        obj.ltv60 = obj.pay_60
          ? parseFloat((obj.pay_60 / obj.reg).toFixed(2))
          : 0;
        obj.ltv120 = obj.pay_120
          ? parseFloat((obj.pay_120 / obj.reg).toFixed(2))
          : 0;
        obj.role_rate = obj.role_rate
          ? (obj.role_rate * 100).toFixed(0) * 1
          : !!obj.reg && !!obj.nroles
          ? ((obj.nroles / obj.reg) * 10000).toFixed(0) * 1
          : 0;
      });
    },
    getWyState() {
      return new Promise((resolve, reject) => {
        let queryObj = {
          sdate: this.query.startDate,
          edate: this.query.endDate,
        };
        this.$api.wyGameReport(queryObj).then((res) => {
          if (res.code == "0") {
            res.data.forEach(function (obj, i) {
              obj.index = i + 1;
            });
            resolve(res.data);
          }
        });
      });
    },
    getWebState() {
      return new Promise((resolve, reject) => {
        let queryObj = {
          date_s: this.query.startDate,
          date_e: this.query.endDate,
        };
        this.$api.webGameReport(queryObj).then((res) => {
          if (res.code == "101") {
            res.data.forEach(function (obj, i) {
              obj.index = i + 1;
            });
            resolve(res.data);
          }
        });
      });
    },
  },
};
</script>
<style lang='stylus' scoped>
body {
}
</style>
